<!doctype html>
<html lang="en">
<head>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
   String path = request.getContextPath();
   String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
	%>
	<base href="<%=basePath%>">
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png" />
	<link rel="icon" type="image/png" href="images/favicon.png" />
	<title></title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />

	<!-- CSS Files -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
	<link href="css/paper-bootstrap-wizard.css" rel="stylesheet" />

	<!-- Fonts and Icons -->
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet">
	<link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
	<link href="css/iconfont.css" rel="stylesheet">
	<style type="text/css">
        ul li {
            list-style: none;
        }
         
        .package-status {
            padding: 18px 0 0 0
        }
         
        .package-status .status-list {
            margin: 0;
            padding: 0;
            margin-top: -5px;
            padding-left: 8px;
            list-style: none;
        }
         
        .package-status .status-list>li {
            border-left: 2px solid #0278D8;
            text-align: left;
        }
         
        .package-status .status-list>li:before {
            /* 流程点的样式 */
            content: '';
            border: 3px solid #0278D8;
            background-color: #0278D8;
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 10px;
            margin-left: -7px;
            margin-right: 10px
        }
         
        .package-status .status-box {
            overflow: hidden
        }
         
        .package-status .status-list>li {
            height: auto;
            width: 95%;
        }
         
        .package-status .status-list {
            margin-top: -8px;
            margin-left: 28%
        }
         
        .package-status .status-box {
            position: relative
        }
         
        .package-status .status-box:before {
            content: " ";
            background-color: #f3f3f3;
            display: block;
            position: absolute;
            top: -8px;
            left: 20px;
            width: 10px;
            height: 4px
        }
         
        .package-status .status-list {
            margin-top: 0px;
        }
         
        .status-list>li:not(:first-child) {
            padding-top: 10px;
        }
         
        .status-content-before {
            text-align: left;
            margin-left: 25px;
            margin-top: -20px;
        }
         
        .status-content-latest {
            text-align: left;
            margin-left: 25px;
            color: #0278D8;
            margin-top: -20px;
        }
         
        .status-time-before {
            text-align: left;
            margin-left: 25px;
            font-size: 10px;
            margin-top: 5px;
        }
         
        .status-time-latest {
            text-align: left;
            margin-left: 25px;
            color: #0278D8;
            font-size: 10px;
            margin-top: 5px;
        }
         
        .status-line {
            border-bottom: 1px solid #ccc;
            margin-left: 25px;
            margin-top: 10px;
        }
         
        .list {
            padding: 0 20px;
            background-color: #F8F8F8;
            margin: 10px 0 0 25px;
            border: 1px solid #EBEBEB;
        }
         
        .list li {
            line-height: 30px;
            color: #616161;
        }
    </style>
</head>

<body>
	<div class="image-container set-full-height" style="background-color:#DDDDDD">
	    
	    <!--   Big container   -->
	    <div class="container">
	        <div class="row">
		        <div class="col-sm-8 col-sm-offset-2">

		            <!--      Wizard container        -->
		            <div class="wizard-container">
		                <div class="card wizard-card" data-color="green" id="wizard">
		                    	<div class="wizard-header">
		                        	<h3 class="wizard-title">物流信息[ ${bagid } ] </h3>
		                        
		                    	</div>
									<div class="package-status" >
										<div class="status-box" >
											<ul class="status-list">
												<c:forEach varStatus="i" var="item" items="${sendmessage }">
													<c:choose>
														<c:when test="${ i.first }">
															<li>
																<div class="status-content-before">您的订单开始处理，将由${item }始发</div>
														</c:when>
														<c:when test="${ i.index!=0 && i.index%2==0 }">
															<li>
																<div class="status-content-before">到达${item }</div>
														</c:when>
														<c:when test="${i.index%2==1 }">
															<div class="status-time-before">${item  }</div>
															<div class="status-line"></div>
															</li>
														</c:when>
														<c:otherwise></c:otherwise>
													</c:choose>
												</c:forEach>
											</ul>
										</div>
									</div>
		                </div>
		                <div class="wizard-footer" style="text-align: center;">
	                                <div>
	                                    <a href="${pageContext.request.contextPath }/index/select" class='btn btn-finish btn-fill btn-success btn-wd' >返回首页</a>
	                                </div>
	                                <div class="clearfix"></div>
		                        </div> 
		            </div> <!-- wizard container -->
		        </div>
	        </div> <!-- row -->
	    </div> <!--  big container -->

	    <div class="footer">
	        <div class="container text-center">
	            Copyright &copy; 2020	顺丰速运 版权所有
	        </div>
	    </div>
	</div>

</body>

	<!--   Core JS Files   -->
	<script src="js/jquery-2.2.4.min.js" type="text/javascript"></script>
	<script src="js/bootstrap.min.js" type="text/javascript"></script>
	<script src="js/jquery.bootstrap.wizard.js" type="text/javascript"></script>

	<!--  Plugin for the Wizard -->
	<script src="js/paper-bootstrap-wizard.js" type="text/javascript"></script>
	

</html>
